<template>
	<view class="uni-flex uni-column box">
		<scroll-view scroll-y>
			<!-- banner -->
			<swiper class="banner">
				<swiper-item>
					<image style="width: 100%;" src="../../static/image/banner_zhanweitu.png"></image>
				</swiper-item>
			</swiper>
			<!-- 分类 -->
			<view class="uni-flex uni-class">
				<view class="uni-flex uni-column" hover-stay-time="50" hover-class="active" style="justify-content: center;" v-for="(item,index) in classTitle"
				    v-on:click="openPaymet(item.title)" v-bind:key="index">
					<image class="icon" :src=item.imgUrl></image>
					<text class="uni-text-centen uni-size-24 uni-m-t20">{{item.title}}</text>
				</view>
			</view>
			<!-- 超低价格 -->
			<view class="low-price uni-flex uni-column">
				<view class="low-price-title">- 超低价格 -</view>
				<view class="uni-flex uni-row low-price-content">
					<view class="low-price-left">
						<image style="width: 100%;height: 100%;" src="../../static/image/chaozhijingxuan_bg.png"></image>
					</view>
					<view class="low-price-rigth uni-column">
						<view class="low-price-rigth-item uni-flex">
							<view class="low-price-text uni-flex uni-column">
								<text class="low-price-text-title">闪购</text>
								<text class="low-price-text-p">清晰现代双人沙发</text>
							</view>
							<image src="../../static/image/sangou.png" class="low-price-img"></image>
						</view>
						<view class="low-price-rigth-item uni-flex">
							<view class="low-price-text uni-flex uni-column">
								<text class="low-price-text-title">半价疯抢</text>
								<text class="low-price-text-p">清晰白色单人沙发</text>
							</view>
							<image class="low-price-img" src="../../static/image/banjiafengqiang.png"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- 销量明星 -->
			<view class="low-price uni-flex uni-column">
				<view class="low-price-title">- 销量明星 -</view>
				<view class="uni-flex uni-row sales-star">
					<view>
						<image class="sales-star-img" src="../../static/image/xiaoliangmingx_zhanwei.png"></image>
					</view>
					<view>
						<image class="sales-star-img" src="../../static/image/xiaoliangmingx_zhanwei.png"></image>
					</view>
					<view>
						<image class="sales-star-img" src="../../static/image/xiaoliangmingx_zhanwei.png"></image>
					</view>
				</view>
			</view>
			<!-- 为你推荐 -->
			<recommend-view title="为你推荐" :listData="listData"></recommend-view>
		</scroll-view>
	</view>
</template>

<script>
	import recommendView from "../../components/recommendView.vue"

	export default {
		data() {
			return {
				classTitle: [{
					title: '本月订单',
					imgUrl: '../../static/image/benyuedingdan.png'
				}, {
					title: '本月付款',
					imgUrl: '../../static/image/benyuefukuan.png'
				}, {
					title: '待发货',
					imgUrl: '../../static/image/daishouhuo.png'
				}, {
					title: '待付款',
					imgUrl: '../../static/image/daifukuan.png'
				}],
				listData: [{
					title: 'A-268 傲视软件沙发真皮层牛皮客厅整组装...',
					price: '¥ 998.00'
				}, {
					title: 'A-255 傲视软件沙发真皮层牛皮客厅整组装...',
					price: '¥ 668.00'
				}],
			}
		},
		onLoad: function () {
			console.log('我是第一次加载');
		},
		onShow: function () {
			console.log('我是每次显示')
		},
		components: {
			recommendView
		},
		methods: {
			openPaymet(option) {
				uni.navigateTo({
					url: 'thispayment?title=' + option, //传递标题
				});
			}
		},
	}
</script>

<style>
	@import "../../common/uni.css";
	.uni-class {
		background: #fff;
		height: 200px;
	}

	.icon {
		width: 100px;
		height: 100px;
		margin: 0 auto;
	}

	.box {
		justify-content: flex-start;
	}

	.banner {
		width: 100%;
	}

	.low-price-title {
		display: flex;
		font-size: 30px;
		color: #333;
		justify-content: center;
		padding: 20px 0;
	}

	.low-price-left {
		width: 348px;
		height: 250px;
	}

	.low-price-rigth {
		width: 400px;
		display: flex;
		justify-content: space-between;
	}

	.low-price-content {
		justify-content: space-between;
	}

	.low-price-rigth-item {
		height: 124px;
		background: #fff;
	}

	.low-price-img {
		width: 350px;
		height: 100%;
	}

	.low-price-text {
		justify-content: center;
		padding-left: 20px;
	}

	.low-price-text-title {
		font-size: 30px;
		color: #000;
	}

	.low-price-text-p {
		font-size: 20px;
		color: #666;
	}

	.sales-star {
		background: #fff;
		padding: 30px 20px;
		box-sizing: border-box;
		align-items: center;
		justify-content: space-between;
	}

	.sales-star view,
	.sales-star-img {
		width: 220px;
		height: 178px;
	}

	.active {
		background: #f1f1f1;
	}
</style>
